<template>
	<view>
	 <view class="sousuo" >
		<nx-search :selectList="selectList" class="sn-earch-input-box" button="outside"  placeholder="搜索避灾安置场所名称或地址" 
			 @search="doSearch()" @confirm="doSearch()"  v-model="searchQuery.keyword" />
	</view>
	
	
	<view class="choose">
		
		<scroll-view class="left" scroll-y >
			<view 
			@click="leftClick(index,item.id)"
			:class="active===index?'active':''" 
			v-for="(item,index) in cates " 
			:key="item.id">{{item.name}}</view>	
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view style="border-bottom: 1px solid #EFEFEF;" v-for="item in secondDate" @click="goto3(item.name)" >
				<view class="flex">
					<view class="view">{{item.name}}</view> 
					<view class="view1">{{item.distance | filterDis}}</view>				
				</view>
				<view class="view2">{{item.address}}</view>
			</view>
			
		</scroll-view>
	</view>
	</view>
</template>

<script>	
	export default {
		components: {},
		filters:{
			filterDis(e){
				 // console.log(e,'eee');
				if(e<1000){
					return e ? e.toFixed(0)+'m' : '';;
				}else if(e==undefined){
					return 0+'m'
				}
				else{
				return (e/2/500).toFixed(2)+'km'
				}
			},
		},
		data() {
			
			return {
				active:0,
				cates:[],
				name:0,
				secondDate:[],
				lon:'',
				lat:'',	
				distance:[],
				hw:'',
				Dis:[],
				list:[],
				distance1:'',
				distance2:'',
				name1:'',
				address1:'',
				name2:'',
				address2:'',
				searchQuery: {
				                    keyword: '',
				                    selectIndex: 0
				                },
				                selectList: [
									
									{
				                        id: 1,
				                        name: '鄞州区'
				                    },
				                    {
				                        id: 2,
				                        name: '海曙区'
				                    },
				                ],
			}
		},
		methods: {
			test(){
				uni.hideKeyboard()
			},
			async getName(){
				//console.log(2333333333);
				this.$myRequest({
					url:'/inspect/v1/region/select',
					data:{"userId":"1195","level":5}
				}).then((res)=>{
					  // console.log(res,'11112222');
					
					this.cates = res.data.data.children
					this.cates.unshift({
						id: "1",
						level: 4,
						name: "离我最近",
						// children: [
						// 	{
						// 		id: "330212303001",
						// 		level: 5,
						// 		name: "ceshi"	
						// 	}
						// ]
					})
					
					// console.log(this.cates,'****');	
				})
				
			},
			async zuijin(){
				//console.log(2333333333);
				this.$myRequest({
					url:'/inspect/v1/owner_flood/page',
					data:{"pageNum":"1","pageSize":"100","areaId":"","point":this.lon+","+this.lat}
				}).then((res)=>{
					  // console.log(res,'55555');
					this.list = res.data.data.list
					// console.log(this.list);
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].distance==undefined){
							this.Dis.push(999999999999999)
						}else{this.Dis.push(this.list[i].distance)}
						
					}
					this.distance1=Math.min(...this.Dis);
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].distance==this.distance1){
							this.name1=this.list[i].name;
							this.address1=this.list[i].address;
						}
						
					}
					
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].distance==this.distance1){
							this.Dis[i]=999999999999999;
						}
						
					}
					this.distance2=Math.min(...this.Dis);
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].distance==this.distance2){
							this.name2=this.list[i].name;
							this.address2=this.list[i].address;
						}
						
					}
					 // console.log(this.distance1,this.distance2,this.address1);
					 // console.log(this.name2,this.address2);
					 
					 
					 this.secondDate = [
					 	{
					 		areaId: "1",
					 		// level: 5
					 		name: this.name1,
					 		address:this.address1,
					 		distance:this.distance1,	
					 	},
					 	{
					 		areaId: "1",
					 		// level: 5
					 		name: this.name2,
					 		address:this.address2,
					 		distance:this.distance2
					 	}
					 ]
					 
					// this.list.push({
					// 	areaId: "1",
					// 	// level: 5
					// 	name: this.E,
					// 	address:this.F,
					// 	distance:this.C,
					// });
					// this.list.push({
					// 	areaId: "1",
					// 	// level: 5
					// 	name: this.G,
					// 	address:this.H,
					// 	distance:this.D
					// });
					// console.log(this.cates);	
				})
				
			},
			leftClick(index,id){
				// console.log(index,'---');
				this.active=index
				if(index === 0){
					this.secondDate = [
						{
							areaId: "1",
							// level: 5
							name: this.name1,
							address:this.address1,
							distance:this.distance1,
						},
						{
							areaId: "1",
							// level: 5
							name: this.name2,
							address:this.address2,
							distance:this.distance2
						}
					]
				}
				if(index === 0) return
				// console.log(2222);
				
				// console.log(id);
				this.$myRequest({
					url:'/inspect/v1/owner_flood/page',
					data:{"pageNum":"1","pageSize":"100","areaId":id,"point":this.lon+","+this.lat}
				}).then((res)=>{
					// console.log(res);
					// this.distance=res.data.data.list[1].distance;
					
					this.secondDate= res.data.data.list;
					
					// for(let i=0;i<this.secondDate.length;i++){
					// 	this.Dis.push(this.secondDate[i].distance)
					// }
					// // var E=Math.min(...this.Dis.distance)
					//  console.log(Math.min(...this.Dis));
					 
					// console.log(this.secondDate,'66');
					
					//     for(var i=0;i<this.secondDate.length;i++){
					// 		this.distance=res.data.data.list[i].distance;
					// 		// console.log(this.distance);	
							
					// 			let hw=this.distance;
					// 			if(hw && hw!==-1){
					// 				if(hw<1000){
					// 					hw=hw.toFixed(0)+'m';
					// 				}
					// 				else{
					// 					hw=(hw/2/500).toFixed(2)+'km'
					// 				}
					// 				this.hw=hw;
					// 				console.log(this.hw);
					// 			}
							
					        
							 // }
					
					
					
					
				})
				
			},
			doSearch(searchQuery) {
			    console.log('searchQuery', searchQuery);
				 
				// uni.navigateTo({
				// 	url:'search?option='+searchQuery.keyword
					
				// })
			},
			goto3(name){
				console.log(name);
				uni.navigateTo({
					url:'../index/index?name='+name
				})
			}
			// open(){
			// 	uni.navigateTo({
			// 		url:'search',
			// 	})
				
			// },
			
		},
		onLoad() {
			
			var that=this
			uni.getStorage({
				key: 'lng',
				success:(res)=>{
					// console.log(res)
					
				}
			})
			try {
			    const X = uni.getStorageSync('lng');
				this.lon=X;
			    if (X) {
			        // console.log(X);
			    }
			} catch (e) {
			    // error
			}
			uni.getStorage({
				key: 'lat',
				success:(res)=>{
					// console.log(res)
					
				}
			})
			try {
			    const Y = uni.getStorageSync('lat');
				this.lat=Y
			    if (Y) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			}
			this.getName();
			this.test();
			this.zuijin();
		}
	}
</script>

<style lang="scss">
//隐藏滚动条
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.page{
	height: 100vh;
}
.choose{
	height: 100vh;
	display: flex;
	.left{
		
		width:200rpx;
		height: 100vh;
		// border-right: 1px solid #eee;
		view{
			height: 120rpx;
			line-height: 120rpx;
			color: #333;
			text-align: center;
			font-size: 30rpx;
			// border-bottom: 1px solid #eee;	
			background-color: #f5f5f5;
		}
		
		.active{
			background-color: #ffffff;
			color: #0052FF;
			border-left: 6rpx solid #0052FF;
		}
	}
	.right{
		width: 520rpx;
		height: 100%;
		// margin: 0 auto;
		margin-left: 32rpx;
		// border-bottom: 1px solid #EFEFEF;
		
		 
		.flex{
			
			display: flex;
			.view{
				flex: 1;
				font-size: 36rpx;
				margin-top: 28rpx;
			}
			.view1{
				flex: 0.2;
				text-align: right;
				font-size: 26rpx;
				color: #666666;
				padding-top: 42rpx;
				padding-right: 30rpx;
			}
		}
		.view2{
			font-size: 28rpx;
			color: #666666;
			padding-top: 10rpx;
			margin-bottom:25rpx; 
		}
	}
	
}
	
</style>
